{include file="public/head"/}
<style>
.preview div{
    position: relative;border: 1px solid #dddddd;overflow: hidden;min-height: 130px;
}
.preview div:hover .delhov{
    bottom: 0px;
}
.delhov{
    position: absolute;width: 100%;height: 40px;bottom: -40px;background: #F5F5F5;left: 0;opacity: 0.7;transition: 0.5s;text-align: center;line-height: 40px;
}
</style>
<script language="javascript" src="/static/Admin/js/tinymce/tinymce.min.js"></script>
<script>
	$(document).ready(function () {
		
		$("[data-toggle='tooltip']").tooltip();

		// 解决BOOSTRAP TAB不能跳转外部页面问题
		$("#proTab li").click(function (e) {
			e.preventDefault()
			$(this).tab('show')      
			window.location.href = $(this).children('a').attr('href')
		})

		// modal框选择
		
		$("input:radio[name='is_icon']").click(function(){
			if($(this).val()=="prochar"){
				$("#select_prochar").show();
			}else{
				$("#select_prochar").hide();
			};
		});
	});
</script>
<div class="container-fluid" id="main">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <input type="hidden" id="did" value="{$pro_id}">

	<div class="ntDesktop">
		<div class="ntDesktop-head">{$title}</div>
        <div class="row" style="padding-top:12px">
            <div class="col-md-8 column">
                <ul class="nav nav-tabs" id="proTab">
                    <li >
                        <a href="{:url('product/productEdit',array('request'=>'edit','id'=>$pro_id))}" data-toggle="tab">{:lang('summary')}</a>
                    </li>
                    <li >
                        <a href="{:url('product/proAddNewJump',array('request'=>'intro','pro_id'=>$pro_id))}" >{:lang("information")}</a>
                    </li>
                    <li >
                        <a href="{:url('product/proAddNewJump',array('request'=>'item','pro_id'=>$pro_id))}" data-toggle="tab">{:lang("accessory")}</a>
                    </li>
                    <li class="active">
                        <a href="{:url('product/proAddNewJump',array('request'=>'img','pro_id'=>$pro_id))}" data-toggle="tab">{:lang("image")}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 column text-right">
                <div>
                    <a href="{:url('product/productlist')}" class="btn btn-default">
                    	<span class="glyphicon glyphicon-chevron-left"></span>{:lang('back_to_list')}
                    </a>
                    <!-- <a href="#" class="btn btn-primary" style="padding-left:2em;padding-right:2em;">
                    	<span class="glyphicon glyphicon-floppy-disk"></span> {:lang('save')} 
                    </a> -->
                </div>
            </div>
        </div>

        <div class="row" style="padding-bottom:1em ">
            <div class="col-md-12 text-right">
	            <a href="{:url('product/proAddNewJump_multiImgAdd',array('pro_id'=>$pro_id))}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#proimgs_uploadModal"><span class="fa fa-upload"></span>{:lang('multi-picture_upload')}</a>
            	<a href="{:url('product/proAddNewJump_imgAdd',array('pro_id'=>$pro_id))}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#proimg_editModal"><span class="fa fa-file-upload"></span>{:lang('upload_product_image')}</a>
            </div>
        </div>
    
        <div class="row">
        	<div class="col-lg-2 col-md-3 col-ms-4 col-xs-6" v-for="(item,index) in imglist">
                <div class="panel panel-default text-center">
                    <div class="panel-body">
                        <div>
                        <img :src="item.img_url" style="width: 128px;height:128px;">
                        </div>
                        <div class="btn-group">
                            <a :href="'/admin/product/proAddnew_imgedit?request=edit&img_id='+item.id+'&pro_id='+item.pro_id+'&prochar_id='+item.prochar_id" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#proimg_editModal"><span class="glyphicon glyphicon-pencil"></span>{:lang('edit')}</a>
                            <button class="btn btn-sm btn-default" @click="delimg(item.id)"><span class="glyphicon glyphicon-remove"></span>{:lang('delete')}</button>
                        </div>
                    </div>
                    <div class="panel-footer">
                    	<small v-cloak>{:lang("icon")}：{{item.name}}</small>
                    </div>
                </div>
            </div>
        </div>

	</div>
</div>



<!--多产品图片添加 开始-->
<div class="modal fade" id="proimgs_uploadModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!--产品图片添加/修改部分 开始-->
<div class="modal fade" id="proimg_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--弹窗部分 结束-->
<script>
    $("#proimgs_uploadModal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
    $("#proimg_editModal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
    new Vue({
        el:'#main',
        data:()=>({
            imglist:[]
        }),
        mounted(){
            this.getdata()
            $('#proimgs_uploadModal').on('hidden.bs.modal',(e)=>{
                this.getdata()
            })
            $('#proimg_editModal').on('hidden.bs.modal',(e)=>{
                this.getdata()
            })
        },
        methods:{
            getdata(){
                $.ajax({
                    url:'/admin/product/proaddnewjump?request=img',
                    data:{
                        pro_id:$('#did').val()
                    },
                    type:'post',
                    success:(data)=>{
                        data = JSON.parse(data)
                        this.imglist=data.imglist
                    }
                })
            },
            delimg(id){
            $.ajax({
                url:'/admin/product/imgDel',
                type:'POST',
                data:{id:id},
                success:(data)=>{
                    data = JSON.parse(data)
                    change_mes_type('.alert',data.status)
                    if(data.status==1){
                    $('.alert').show()
                    $('.alert p').html('*'+data.msg+'<br>')
                    this.getdata()
                    }else{
                    $('.alert').show()
                    $('.alert p').html('*'+data.msg+'<br>')
                    }
                }
            });
            }
            }
    })
</script>
{include file="public/foot"/}